<template>
	<!-- 导航 -->
	<div class="component-item">
		<div class="home-slider-box">
			<swiper class="swiper" circular autoplay="true" interval="10000" duration="1000" :indicator-dots="true">
				<block v-for="(item2, index) in sliderList" :key="index">
					<swiper-item catchtouchmove='catchTouchMove'>
						<div class="slider-box"
							 :style="{'padding-left': item.borderMargin + 'px', 'padding-right': item.borderMargin + 'px', 'margin-top': item.pageMargin + 'px'}" @click="sliderToDetailPage(item2)">
								<img :src="item2.pic_url" :style="{'border-radius': item.sliderStyle == 'circle' ? '6px' : '0px'}">
						</div>
					</swiper-item>
				</block>
			</swiper>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cSlider",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		data() {
			return {
				sliderList: []
			}
		},
		mounted() {
			this.getSliderList()
		},
		methods: {
			// 获取幻灯数据
			async getSliderList() {
				let res = await this.$api.home.getSliderList.get({position: 1})
				this.sliderList = res.data
			},
			// 导航跳转
			sliderToDetailPage(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: `${item.target_url}`
					})
				} else {
					window.location.href = item.target_url
				}
			},
		}
	}
</script>

<style>
</style>